import React, {Component} from 'react';
import './index.css'
import PubSub from 'pubsub-js';

class List extends Component {
    state ={
        users:[], //初始数组
        isFirst:true,//第一次进入打开页面
        isLoading:false,
        err:'',//错误信息
    }
    //初始化-订阅消息
    componentDidMount() {
        this.token=PubSub.subscribe('atguigu',(msg,data)=>{
          this.setState(data)
        })
    }
    //取消订阅
    componentWillUnmount() {
        PubSub.unsubscribe(this.token)
    }

    render() {
        const {users,isFirst,isLoading,err} = this.state
        return (
            <div className='row'>
                {
                    isFirst? <h2>欢迎使用，输入关键字 点击搜索</h2> :
                    isLoading?<h2>Loading...</h2> :
                    err?<h2>{err}</h2>:
                    users.map((userObj)=>{
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                    <img alt="头像图片" src={userObj.avatar_url} style={{width:"100px",height:"100px"}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;